<ion-header title="首页" style="background: #fff!important">
  <ion-navbar style="background: #fff!important">
    <button ion-button style="padding-left: 1px;background: #fff;width: 15%;" class="button-ios-city" (click)="openCitiChoose()">
    <!-- " class="button-ios-city" (click)="toBaidu()"> -->
    <span style=" display: flex;flex-wrap: wrap;flex-direction: column;justify-content: center">
      <ion-icon style="font-size:2rem;color: #ccc" name="md-pin"></ion-icon>
      <!-- <span style="color: rgb(102, 102, 102);font-size:1rem;margin-top:2rem;margin-left:0.8rem;">{{cityName}} </span> -->
      <span style="color: rgb(102, 102, 102);font-size:1rem">{{currCity.substr(0,2)}} </span>
    </span>
  </button>
    
    <ion-title>
      <ion-item class='search'>
        <ion-label class='searchIon' [ngClass]="{'isFocus':searchGetTheFocus==1,'loseFocus':searchGetTheFocus==2}">
        </ion-label>
        <ion-input placeholder='搜素美图，美甲师，店铺' class='search-input' (click)='getFocus($event)'
          [(ngModel)]='myInput'></ion-input>
      </ion-item>
    </ion-title>
    <!-- (click)="gotoSearch()" -->
    <!--<ion-buttons end>
      <button ion-button icon-only>
         <ion-icon name="md-camera" color="#ffffff" style="padding-right: 5px; font-size: 26px;" ></ion-icon>
       </button>
    </ion-buttons>-->
  </ion-navbar>
  <!--<ion-slides pager style="height: 200px" loop autoplay="1500">

    <ion-slide>
      <img src="http://www.mengfeisi.com.cn/Uploads/nail_album/2017-03-07/1_328.jpg" style="width: 100%" alt="">
    </ion-slide>

    <ion-slide>
      <img src="http://www.mengfeisi.com.cn/Uploads/nail_album/2017-03-07/2_328.jpg" style="width: 100%" alt="">
    </ion-slide>

    <ion-slide>
      <img src="http://www.mengfeisi.com.cn/Uploads/nail_album/2017-03-07/3_328.jpg" style="width: 100%" alt="">
    </ion-slide>

  </ion-slides>
  <div class="bats">
    <div class="bat1"><button active value="recommend" (ionSelect)="selectFunc('RcmdPage')"><img src="../../assets/img/ios/shangcheng-@2x.png" style="width: 50px;height: 50px;" alt=""></button><br><span>商城</span></div>
    <div class="bat2"><button value="recommend" (ionSelect)="selectFunc('RcmdPage')"><img src="../../assets/img/ios/jiuye@2x.png" style="width: 50px;height: 50px;" alt=""></button><br><span>就业</span></div>
    <div class="bat3"><button value="recommend" (ionSelect)="selectFunc('RcmdPage')"><img src="../../assets/img/ios/peixun@2x.png" style="width: 50px;height: 50px;" alt=""></button><br><span>培训</span></div>
  </div>-->
</ion-header>

<ion-content #container has-header>




  <ion-nav [root]="contentArea" #content swipeBackEnabled="false"></ion-nav>
  <ion-fab right bottom (tap)="add1()" *ngIf="haveId==true">
    <button ion-fab>
      <img src="assets/img/ios/fabu.png" alt="" class="float">
    </button>
  </ion-fab>
</ion-content>

<ion-menu id="notDetail" type="overlay" _ [content]="container" side="right" class="right">
  <ion-content>

    <ion-list>
      <!-- center text-center -->
      <ion-item select *ngFor="let p of otherStyleList" (click)="showMoreStyle(p)" [style.color]="p.selected?'#fd6186':'#000000'">
        {{p.type_name}}</ion-item>
    </ion-list>

    <div>
      <span>流行新款</span>
      <br>
      <div class="cont2">
        <div class="btns" (click)="style(i)" *ngFor="let type of types; let i = index">
          {{type.type_name}}
          <img class="rem1" (click)="rem1(i)" src="assets/img/ios/guanbi@3x.png">
        </div>
      </div>
    </div>
    <hr>
    <div>
      <span>手法</span>
      <br>
      <div class="cont2">
        <div class="btns1" (click)="style1(i)" *ngFor="let hand of hands, let i = index">{{hand.type_name}}
          <img class="rem2" (click)="rem2(i)" src="assets/img/ios/guanbi@3x.png">
        </div>
      </div>
    </div>
    <hr>
    <div class="metai">
      <span>材料</span>
      <br>
      <div class="cont2">
        <div class="btns2" (click)="style2(i)" *ngFor="let tool of tools, let i = index">{{tool.type_name}}
          <img class="rem3" (click)="rem3(i)" src="assets/img/ios/guanbi@3x.png">
        </div>
      </div>
    </div>
    <hr>
    <div class='tishixinxi'>
      <p>提示: 每种款式只能选择一项</p>
    </div>
    <div class="btn1">
      <div class="btn2 active" (click)="all()">
        重置
      </div>
      <div class="btn2" menuClose="left" (click)="getStyleByid()">
        完成
      </div>
    </div>
  </ion-content>
</ion-menu>



<ion-menu id="isDetail" type="overlay" _ [content]="container" side="left" class="right">
  <ion-content>
    <ion-row>
      <ion-col col-6>
        <div class="btn2 active" (click)="allbac()">
          取消
        </div>
      </ion-col>
      <ion-col col-6>
        <div class="btn2 active" (click)="ok()">
          完成
        </div>
      </ion-col>
    </ion-row>
    <div class="detail" style="margin-top:5rem">
      <div>
        <span>流行新款</span>
        <br>
        <div class="cont2d">
          <div class="btnsd" (click)="stylee(i)" *ngFor="let type of types2; let i = index">
            {{type.type_name}}
            <img class="rem1d" (click)="remm1(i)" src="assets/img/ios/guanbi@3x.png">
          </div>
        </div>
      </div>
      <hr>
      <div>
        <span>手法</span>
        <br>
        <div class="cont2d">
          <div class="btns1d" (click)="stylee1(i)" *ngFor="let hand of hands2, let i = index">{{hand.type_name}}
            <img class="rem2d" (click)="remm2(i)" src="assets/img/ios/guanbi@3x.png">
          </div>
        </div>
      </div>
      <hr>
    </div>
  </ion-content>
</ion-menu>
